<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body,div,span{
				margin: 0;
				padding: 0;	
			}
		 	ul,li{
		 		list-style: none;
		 	}
			ul li{
				width: 200px;
				height: 100px;
				background: yellow;
				margin-bottom: 20px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var aLi = document.getElementsByTagName("li");
				for(var i=0;i<aLi.length;i++){
					aLi[i].timer=null;
					aLi[i].onmouseover = function(){
						startMove(this,400);
					}
					aLi[i].onmouseout=function(){
						startMove(this,200);
					};
				}
		
			}
			//var timer = null;
			function startMove(obj,iTarget){
				clearInterval(obj.timer);
				obj.timer = setInterval(function(){
					var speed =(iTarget-obj.offsetWidth)/8;
					speed = speed>0?Math.ceil(speed):Math.floor(speed);
					if(obj.offsetWidth == iTarget){
						clearInterval(obj.tiemr);
					}
					else{
						obj.style.width=obj.offsetWidth+speed+'px';
					}
				},30)
			}
		</script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
